Выберите пользовательский тег из атрибута кнопки

Question

Я создал структуру элемента кнопки, как показано ниже

<input 
      type="button" 
      class="btn btn-primary" 
      name="redirect" 
      value="<mycustomtag data-id=15>"
      title="<mycustomtag data-id=14>"
>

Теперь, когда DOM готовится, я пытаюсь найти пользовательский элемент и пытаюсь заменить его на строку.Но я не могу заменить пользовательский элемент.

Фрагменты, которые я использовал, чтобы найти, как показано ниже

jQuery("mycustomtag").each(function(){
    //process here
});

PS это прекрасно работает в следующем случае:

<div><mycustomtag data-id=20></div>
<h4><mycustomtag data-id=18></h4>

Answer 1

Если вы поместите свой пользовательский тег в атрибут другого тега, он не будет отображаться на странице, другими словами, он не будет частью дерева документа DOM, это будет просто stringв атрибуте, поэтому, когда вы используете jQuery("mycustomtag"), вы ничего не получаете, но это будет работать, если вы поставите его как потомок div или span.

Так что в вашемВ конкретном случае вам нужно будет использовать .attr() метод , чтобы получить его из этого конкретного атрибута, или .val() метод , если он находится взначение.

jQuery("input").attr("title");
jQuery("input").val();

Демо:

console.log(jQuery("input").attr("title"));
console.log(jQuery("input").val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input 
      type="button" 
      class="btn btn-primary" 
      name="redirect" 
      value="<mycustomtag data-id=15>"
      title="<mycustomtag data-id=14>"
>

Answer 2

Вы не можете найти их, так как значение атрибута рассматривается как строка .

Чтобы найти эти элементы, вам нужно выбрать их на основе основного тега, выбравконкретный атрибут, использующий .prop(), например:

$('input').each(function() {
   $(this).val();
   $(this).prop('title');
});

PS это прекрасно работает в следующем случае

Это потому, что в этом случае он рассматривается как элемент тегав вашем DOM, поэтому jQuery может найти его с помощью простого селектора.

$('input').each(function() {
  console.log($(this).val());
  console.log($(this).prop('title'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" class="btn btn-primary" name="redirect" value="<mycustomtag data-id=15>" title="<mycustomtag data-id=14>">

Answer 3

В вашем первом HTML-коде вы ищете атрибут value или title.Во-вторых, это имя элемента.

Чтобы выбрать элемент на основе его значения, используйте следующий синтаксис:

$("input[value='<mycustomtag data-id=15>'")

Чтобы выбрать элемент на основе его названия, работает аналогично.

Answer 4

ваш код

jQuery ("mycustomtag")

попытается найти тег с именем mycustomtag, и я понимаю, что вы пытаетесь заменить входные атрибутыверно?

попробуйте следовать

//if you want to get values
var value = $("#btnCustom").attr("value");
var title = $("#btnCustom").attr("title");
alert(value);
alert(title);

//if you want to set values
$("#btnCustom").attr("value","replacevalue");
$("#btnCustom").attr("title","replace value 2");
value = $("#btnCustom").attr("value");
title = $("#btnCustom").attr("title");
alert(value);
alert(title);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input 
      type="button" 
      class="btn btn-primary" 
      name="redirect" 
      value="<mycustomtag data-id=15>"
      title="<mycustomtag data-id=14>"
      id="btnCustom"
>